<template>
	<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="closeFun">
		<view class="px-40 pt-40 pb-20 flex items-center justify-between">
			<view class="text-30 flex items-center"><image :src="`${imgPath}png/pic15.png`" class="mr-10 w-40 h-40" style="margin-top: 3rpx;" />答题卡</view>
			<view class="flex items-center justify-center statusbox">
				<template v-if="isexam || istask">
					<view class="flex items-center">
						<view class="box"></view>
						<view class="text-gray-80">未答</view>
					</view>
					<view class="current flex items-center">
						<view class="box"></view>
						<view class="text-gray-80">已答</view>
					</view>
				</template>
				<template v-else>
					<view class="flex items-center">
						<view class="box"></view>
						<view class="text-gray-80">未答</view>
					</view>
					<view class="current flex items-center">
						<view class="box"></view>
						<view class="text-gray-80">正确</view>
					</view>
					<view class="error flex items-center">
						<view class="box"></view>
						<view class="text-gray-80">错误</view>
					</view>
				</template>
			</view>
		</view>
		<scroll-view scrollY class="flex1 mb-20" @scrolltolower="loadmoreEvent" style="max-height: 640rpx; display: flex; flex-direction: column;">
			<view class="flex-left flex-wrap cardbox flex1 flex-between" style="min-height: 0;">
				<text class="number" 
				:class="{
					actived: index === keys, 
					current: (item.status?.value == 1 && !isexam) || (isexam && ((item.status && item.status.value !== -1) || item.answer?.length) || (istask && item.answerFile)), 
					error: item.status?.value == 2 && !isexam
				}" 
				:style="{ 'margin-right': keys + 1 === list.length ? 'auto' : '' }"
				v-for="item,keys in list" 
				@click="itemFun(keys)">{{keys + 1}}</text>
			</view>
		</scroll-view>
		<view class="flex px-40" v-if="issubmit">
			<view class="btn" @click="submitFun">提交试卷</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { imgPath } from '@/common/config.js'
import {watch, ref} from 'vue'
const props = defineProps({
	modelValue: Boolean,
	list: Array,
	index: Number,
	isexam: Boolean, 
	istask: Boolean,
	issubmit: {
		type: Boolean,
		default: true
	}
})

const emit = defineEmits(['update:modelValue', 'card', 'submit', 'load'])

const popup = ref()
watch(() => props.modelValue,(newVal, oldVal) => {
	if(newVal){
		popup.value.open('bottom')
	} else{
		popup.value && popup.value.close()
	}
}, { immediate: true, deep: true})

const closeFun = () => {
	emit("update:modelValue")
}
const itemFun = (keys) => {
	emit('card', keys)
}

const submitFun = () => {
	emit('submit')
}

function loadmoreEvent(){
	emit('load')
}

</script>

<style lang="scss" scoped>
	// .cardbox{background-color: #fff; border-radius: 20rpx 20rpx 0 0;}
	.title{font-size: 32rpx; padding:20rpx 40rpx;}
	.cardbox{padding: 20rpx 40rpx 50rpx; gap: 30rpx;}
	// .number{width: 70rpx; height: 70rpx; font-size: 28rpx; line-height: 68rpx; text-align: center; border: 1px solid #e6e6e6; border-radius: 100%;}
	.btn{flex: 1;margin-bottom: 40rpx; font-size: 30rpx; background-color: $blue; color: #fff; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 50rpx;}
	// .number.actived{background-color: $blue; color: #fff; border-color: $blue;}
	// .number.error{background-color: rgba($red, 0.05); color: $red; border-color: $red;}
	// .number.current{background-color: rgba($green, 0.05); color: $green; border-color: $green;}
	
	.cardbox .number{width: 70rpx; color: #999; height: 70rpx; font-size: 28rpx; line-height: 68rpx; text-align: center; background-color: rgba($gray, 0.05); border-radius: 100%;}
	.cardbox .number.error{background-color: rgba($red, 0.05); color: $red; border: 1px solid $red;}
	.cardbox .number.current{background-color: rgba($green, 0.05); color: $green; border: 1px solid $green;}
	.cardbox .number.actived{background-color: $blue; color: #fff; border: 1px solid $blue;}
	
	.statusbox{font-size: 22rpx; line-height: 1;}
	.statusbox .box{width: 8rpx; height: 8rpx; background-color: #e6e6e6; border-radius: 100%; margin-right: 10rpx; margin-left: 30rpx;}
	.statusbox .error .box{background-color: $red;}
	.statusbox .current .box{background-color: $green;}
	.statusbox .actived .box{background-color: $blue;}
</style>